<template>
  <div class="flex">
    <ul class="nav nav-tabs" style="margin-bottom:10px" v-if="enable">
      <li class="active"><a href="#">发票详细信息</a></li>
    </ul>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_bill_id_start" placeholder='起始票号'
                    condition="f_bill_id >= '{}'"
                    :size="model.f_bill_id_start ? model.f_bill_id_start.length  : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_bill_id_end" placeholder='终止票号'
                    condition="f_bill_id <= '{}'"
                    :size="model.f_bill_id_end ? model.f_bill_id_end.length  : 4">
          </div>
          <!--<div class="form-group">-->
          <!--<v-select id="f_operator"-->
          <!--v-model="model.f_operator"-->
          <!--placeholder='使用人'-->
          <!--:value.sync="model.f_operator"-->
          <!--:options='$parent.$parent.operator'-->
          <!--condition= "f_operator = '{}'"-->
          <!--close-on-select>-->
          <!--</v-select>-->
          <!--</div>-->
          <div class="form-group">
            <datepicker id="startDate" placeholder="开始日期"
                        v-model="model.startDate"
                        :value.sync="model.startDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyyMMdd'"
                        condition= "CONVERT(varchar(100), f_operate_date, 112) >= {}"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="form-group">
            <!-- <label for="endDate">结束日期:</label> -->
            <datepicker id="endDate" placeholder="结束日期"
                        v-model="model.endDate"
                        :value.sync="model.endDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyyMMdd'"
                        condition= "CONVERT(varchar(100), f_operate_date, 112) <= {}"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="form-group">
            <v-select id="f_bill_type"
                      v-model="model.f_bill_type"
                      placeholder='业务类型'
                      :value.sync="model.f_bill_type"
                      :options='$parent.$parent.billType'
                      condition= "f_bill_type = '{}'"
                      close-on-select>
            </v-select>
          </div>
          <!--<div class="form-group">-->
          <!--<v-select id="f_bill_style"-->
          <!--v-model="model.f_bill_style"-->
          <!--placeholder='发票类型'-->
          <!--:value.sync="model.f_bill_style"-->
          <!--:options='$parent.$parent.billStyle'-->
          <!--condition= "f_bill_style = '{}'"-->
          <!--close-on-select>-->
          <!--</v-select>-->
          <!--</div>-->
          <!-- <div class="form-group">
            <v-select id="f_filiale"
              v-model="model.f_filiale"
              placeholder='分公司'
              :value.sync="model.f_filiale"
              :options='$parent.$parent.filiale'
              condition= "f_filiale = '{}'"
              close-on-select>
          </v-select>
          </div> -->
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <export-excel :data="{items: 'f_bill_id,f_userinfo_id,f_user_name,f_user_id,f_billdetail_id,f_bill_type,f_total_money,f_paid_money,f_bill_state,f_operator,f_operate_date,f_operator',
            orderitem: 'f_bill_id',tablename: 't_billdetail',
            condition: condition}" bean='发票使用详情导出' sqlurl="rs/logic/exportfile"></export-excel>
          </div>
        </div>
      </criteria>
      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>序号</th>
            <th>发票编号</th>
            <th>用户编号</th>
            <th>表编号</th>
            <th>用户姓名</th>
            <th>合计金额</th>
            <th>实收金额</th>
            <th>业务类型</th>
            <!--<th>发票类型</th>-->
            <th>状态</th>
            <th>使用日期</th>
          </tr>
        </template>
        <template partial='body':model="model">
          <tr>
            <td style="text-align:center">{{$index+1}}</td>
            <td style="text-align:center">{{row.f_bill_id}}</td>
            <td style="text-align:center">{{row.f_userinfo_id}}</td>
            <td style="text-align:center">{{row.f_user_id}}</td>
            <td style="text-align:center">{{row.f_user_name}}</td>
            <td style="text-align:center">{{row.f_total_money}}</td>
            <td style="text-align:center">{{row.f_paid_money}}</td>
            <td style="text-align:center">{{row.f_bill_type}}</td>
            <!--<td style="text-align:center">{{row.f_bill_style}}</td>-->
            <td style="text-align:center">{{row.f_bill_state}}</td>
            <td style="text-align:center">{{row.f_operate_date}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  /**
   *阶梯水价查询列表
   */
  import AppData from '../../../../stores/AppData'
  import * as Util from '../../../Util'
  import { PagedList } from 'vue-client'

  export default {
    data () {
      return {
        isshow: false,
        model: new PagedList('rs/sql/singleTable_OrderBy', 50, {tablename: "'" + this.tablename + "'",
          orderitem: "'" + this.orderitem + "'", items: "'" + this.items + "'"}),
        xiugai: false
      }
    },
    props: {
      data: {},
      condition: {
        type: String
      },
      tablename: {
        type: String,
        default: 't_billdetail'
      },
      orderitem: {
        type: String,
        default: 'id'
      },
      items: {
        type: String,
        default: '*'
      },
      enable: {
        type: Boolean,
        default: true
      }
    },
    ready () {
      console.log('是否启用', this.enable)
      if (!this.enable) {
        this.search()
      }
    },
    methods: {
      selfSearch (args) {
        if (!Util.f.parent.parent.name.includes('统一资源管理')) {
          args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
        }
        args.condition += this.condition ? this.condition : ''
        this.model.search(args.condition, this.model)
      },
      search () {
        this.$refs.paged.$refs.cri.search()
      }
    },
    watch: {
      'data' (val) {
        if (val.id) {
          this.xiugai = true
        }
        this.condition = ` and f_bill_id >= ${val.f_start_number} and f_bill_id <= ${val.f_end_number} and f_bill_state != '未用'`
        this.search()
      }
    },
    computed: {
      billType () {
        return [{label: '全部', value: ''}, ...AppData.getParam('发票业务类型')]
      },
      operator () {
        return [{label: '全部', value: ''}, ...AppData.getParam('操作人')]
      },
      filiale () {
        return [{label: '全部', value: ''}, ...AppData.getParam('分公司')]
      },
      billStyle () {
        return [{label: '全部', value: ''}, ...AppData.getParam('发票打印类型')]
      }
    }
  }
</script>
